<template>
    <div> 
        <el-button :icon="Plus" type="primary" @click="emits('changeCompon',2)">
            添加SPU
        </el-button>
        <el-table  border :data="spuList" style="width: 100%;margin:10px 0">
            <el-table-column label="序号" type="index"  width="180" align="center" />
            <el-table-column label="SPU名称" prop='spuName' width="180" align="center" />
            <el-table-column label="SPU描述" prop="description" align="center" />
            <el-table-column label="操作" align="center">
                <template v-slot="{row,$index}">
                    <el-button type="primary" size="small" title="添加SKU" :icon="Plus"></el-button>
                    <el-button type="warning" size="small" title="修改SPU" :icon="Edit"></el-button>
                    <el-button type="info" size="small" title="查看SKU列表" :icon="InfoFilled"></el-button>
                        <el-popconfirm
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#626AEF"
                        title="你确定要删除该条数据吗?"
                        @confirm="deleteSpuData(row.id)"
                        @cancel="cancelEvent">
                        <template #reference>
                            <el-button type="danger" size="small" title="删除SPU" :icon="Delete"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[3, 6, 9, 12]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="prev, pager, next, jumper,->,total, sizes"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script lang="ts">
export default {
    name:'SpuList'
}
</script >

<script lang="ts" setup>
// @ts-noCheck
import {ref,watch,defineEmits} from 'vue'
import {ElMessage } from 'element-plus'
import {Plus,Edit,InfoFilled,Delete} from '@element-plus/icons-vue'
import { useCategoryListStore } from '@/stores/categoryList';
import {reqGetSpuListData,reqDeleteSpuData } from '@/api/product/spu'
// 分页相关变量
const currentPage = ref<number>(1)
const small = ref(false)
const disabled = ref(false)
const background = ref(false)
const pageSize = ref<number>(6)
const total = ref<number>(1)
const categoryStore = useCategoryListStore()
// 定义一个存放spu列表数据的
const spuList = ref([])

const emits = defineEmits(['changeCompon']) // 接收自定义事件

// 1.获取spu列表数据
const getSpuListData = async()=>{
    const res = await reqGetSpuListData(currentPage.value,pageSize.value,categoryStore.category3Id)
    spuList.value = res.records;
    console.log(spuList.value)
    total.value = res.total;
}
// 2.当三级导航变化的时候，才需要发送请求，获取spu列表数据，此时需要引入categoryStore,并监听三级导航 
watch(()=>categoryStore.category3Id,category3Id=>{
    if(!category3Id){
        spuList.value = []
        return false
    }
    getSpuListData()
    
},{immediate:true})

// 3.切换页码
// 切换页码就要重新拿数据 而分类没有变 所以只用改变当前页就行
const handleCurrentChange = (val:number)=>{
    currentPage.value = val
    getSpuListData()
}

// 4.更改每页显示条数
// 记住：更改显示条数后 要回到第一页！
const handleSizeChange = (val:number)=>{
    pageSize.value = val
    currentPage.value = 1
    getSpuListData()
}

// 5.删除spu
const deleteSpuData = async(id:number)=>{
    console.log(id)
    await reqDeleteSpuData(id)
    ElMessage.success('删除成功')
    getSpuListData()
}
</script>

<style scoped>

</style>